<template>
  <div
    class="chat-item"
    :class="active ? 'active' : ''"
    @contextmenu.prevent="showRightMenu($event)"
  >
    <div class="chat-left">
      <HeadImage
        :url="chat.headImage"
        :name="chat.showName"
        :size="42"
        :id="chat.type == 'PRIVATE' ? chat.targetId : 0"
        :isShowUserInfo="false"
      />
      <div v-show="chat.unreadCount > 0" class="unread-text">
        {{ chat.unreadCount }}
      </div>
    </div>
    <div class="chat-right">
      <div class="chat-name">
        <div class="chat-name-text">
          <div>{{ chat.showName }}</div>
          <el-tag v-if="chat.type == 'GROUP'">群</el-tag>
        </div>
        <div class="chat-time-text">{{ showTime }}</div>
      </div>
      <div class="chat-content">
        <div class="chat-at-text">{{ atText }}</div>
        <div class="chat-send-name" v-show="isShowSendName">
          {{ chat.sendNickName + ":&nbsp;" }}
        </div>
        <div
          class="chat-content-text"
          v-html="emotion.transform(chat.lastContent, 'emoji-small')"
        ></div>
      </div>
    </div>
    <RightMenu ref="rightMenuRef" @select="onSelectMenu" />
  </div>
</template>

<script setup lang="ts">
import { isNormal } from "@/types/messageType";
import { toTimeText } from "@/utils/date";
import emotion from "@/utils/emotion";
const menuItems = [
  {
    key: "TOP",
    name: "置顶",
    icon: "el-icon-top",
  },
  {
    key: "DELETE",
    name: "删除",
    icon: "el-icon-delete",
  },
];
const props = defineProps({
  chat: {
    type: Object,
  } as any,
  active: {
    type: Boolean,
  },
});
const emits = defineEmits(["top", "delete"]);
const rightMenuRef = ref(null);
const isShowSendName = computed(() => {
  if (!props.chat.sendNickName) {
    return false;
  }
  let size = props.chat.messages.length;
  if (size == 0) {
    return false;
  }
  // 只有群聊的普通消息需要显示名称
  let lastMsg = props.chat.messages[size - 1];
  return isNormal(lastMsg.type);
});
const showTime = computed(() => {
  return toTimeText(props.chat.lastSendTime, true);
});
const atText = computed(() => {
  if (props.chat.atMe) {
    return "[有人@我]";
  } else if (props.chat.atAll) {
    return "[@全体成员]";
  }
  return "";
});

function showRightMenu(e: any) {
  rightMenuRef.value?.open(e, menuItems);
}
function onSelectMenu(item: any) {
  emits(item.key.toLowerCase());
}
</script>

<style lang="scss" scoped>
.chat-item {
  height: 50px;
  display: flex;
  position: relative;
  padding: 5px 10px;
  align-items: center;
  background-color: var(--im-background);
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    background-color: var(--im-background-active);
  }

  &.active {
    background-color: var(--im-background-active-dark);
  }

  .chat-left {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .unread-text {
      position: absolute;
      background-color: #f56c6c;
      right: -4px;
      top: -8px;
      color: white;
      border-radius: 30px;
      padding: 1px 5px;
      font-size: 10px;
      text-align: center;
      white-space: nowrap;
      border: 1px solid #f1e5e5;
    }
  }

  .chat-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    text-align: left;
    overflow: hidden;

    .chat-name {
      display: flex;
      line-height: 20px;
      height: 20px;

      .chat-name-text {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: var(--im-font-size);
        white-space: nowrap;
        overflow: hidden;

        .el-tag {
          min-width: 22px;
          text-align: center;
          border-radius: 10px;
          border: 0;
          height: 16px;
        }
      }

      .chat-time-text {
        font-size: var(--im-font-size-smaller);
        text-align: right;
        color: var(--im-text-color-light);
        white-space: nowrap;
        overflow: hidden;
        padding-left: 10px;
      }
    }

    .chat-content {
      display: flex;
      line-height: 22px;

      .chat-at-text {
        color: #c70b0b;
        font-size: var(--im-font-size-smaller);
      }

      .chat-send-name {
        font-size: var(--im-font-size-small);
        color: var(--im-text-color-light);
      }

      .chat-content-text {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--im-font-size-small);
        color: var(--im-text-color-light);
      }
    }
  }
}
</style>
